<!Doctype html>
<html lang="zh-CN" xml:lang="zh-CN">
<head>
	<meta charset="utf-8"/>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1.0,minimum-scale=1.0, user-scalable=no, width=device-width">
    <title>media&blog - 注册</title>
    <meta name="keywords" content="微信,技术,兴趣,博客,社区,摄影,旅游,艺术,娱乐,综艺,故事,酒">
    <meta name="description" content="MB, 轻松分享你的兴趣. 便捷的文字、图片发布,视频发布，扁平化的响应式设计,美观、大气,是您记录生活的最佳选择">
    <link href="/assets/css/bootstrap.css" rel="stylesheet" /> 
  	<link rel="stylesheet" media="screen" href="/assets/css/font-awesome.min.css" /> 

	<link rel="stylesheet" href="/assets/layui/css/layui.css" /> 
	<link rel="stylesheet" type="text/css" href="/assets/css/login.css">


	<script src="/assets/js/jquery.min.js"></script>
	<script src="/assets/jquery_validate/jquery.validate.min.js"></script>
	<script src="/assets/js/bootstrap.min.js"></script>
	<script src="/assets/layui/lay/dest/layui.all.js"></script> 
	
</head>

<body class="sign">
	<div class="login">
		<a href="/index">
			<img src="/assets/images/MB.png" height="72px" width="72px">
		</a>
		<h1>MB，Media and Blog，分享你的文章和视频。</h1>
		<hr>
		<form id="reg_form" method="post" action="/reg/save">
			<div style="margin-bottom: 25px" class="input-group">
                <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
                <input id="userName" type="text" class="form-control" name="userName" value="" placeholder="建议输入英文作为用户名" minlength="2" maxlength="30" required>
            </div>
            <div style="margin-bottom: 25px" class="input-group">
                <span class="input-group-addon"><i class="fa fa-user-secret"></i></span>
                <input id="nickName" type="text" class="form-control" name="nickName" value="" placeholder="昵称中英文皆可" minlength="1" required>
            </div>
            <div style="margin-bottom: 25px" class="input-group">
                <span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
                <input id="email" type="email" class="form-control" name="email" value="" placeholder="邮箱" required data-conditional="email" data-description="email">
            </div>
			<div style="margin-bottom: 25px" class="input-group">
                <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
                <input id="password" type="password" class="form-control" name="password" placeholder="密码" minlength="6" maxlength="20" required>
            </div>
            <div style="margin-bottom: 25px" class="input-group">
                <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
                <input id="password" type="password" class="form-control" name="rePassword" placeholder="再次输入密码" minlength="6" maxlength="20" required>
            </div>
			<div style="margin-top: 15px;">
				<input type="submit" class="btn btn-success border" value="注册" style="pointer-events: auto;">

				<div class="forgot">
				    <a href="/login">
				        已有账号登录
				    </a>
				</div>
			</div>
		</form>
	</div>
	<p class="small">
		Copyright © MB <a href="/" target="_blank">
		</a>
	</p>
	<script type="text/javascript" src="/assets/jquery_form/jquery.form.min.js"></script>
	<script type="text/javascript" src="/assets/layer-v3.0.2/layer/layer.js"></script>
	<script type="text/javascript">
	
		$(document).ready(function() {
			$("#reg_form").ajaxForm({
				dataType: "json"
				, beforeSubmit: function(formData, jqForm, options) {     
					// 表单提交之前回调                                 
					// do nothing
				}
				, success: function(ret) {
					console.log("ret:"+ret);
					// 业务层验证成功
					if(ret.isOk) {
						layer.msg(ret.msg, {
									icon: 6
									, shift: 6
									, shade: 0.3
									, time: 8500
									, offset: "165px"
									, closeBtn: 1
									, shadeClose: true
								}, function() {
									//跳转到首页
									window.location.href="/index";
								}
						);
						return ;
					}
					
					// 业务层验证失败
					if (ret.isFail) {
						layer.msg(ret.msg, {
									shift: 6
									, shade: 0.3
									, time: 8500
									, offset: "165px"
									, closeBtn: 1
									, shadeClose: true
								} , function() {
									//暂时不加验证码
									//updateCaptcha();
								}
						);
						return ;
					}
					
					// Validator 层验证失败
					if (ret.emailMsg) {
						layer.msg(ret.emailMsg, {
									icon: 5
									, shift: 6
									, shade: 0.3
									, time: 8500
									, offset: "165px"
									, closeBtn: 1
									, shadeClose: true
								}
						);
					}
					if (ret.userNameMsg) {
						layer.msg(ret.userNameMsg, {
									icon: 5
									, shift: 6
									, shade: 0.3
									, time: 8500
									, offset: "165px"
									, closeBtn: 1
									, shadeClose: true
								}
						);
					}
					if (ret.passwordMsg) {
						layer.msg(ret.passwordMsg,  {
									icon: 5
									, shift: 6
									, shade: 0.3
									, time: 8500
									, offset: "165px"
									, closeBtn: 1
									, shadeClose: true
								}
						);
					}
				}
				, error: function(ret) {console.log("error") }              // ret.status != 200 时回调
				, complete: function(ret) {console.log("complete")  }       // 无论是 success 还是 error，最终都会被回调
			});
		});
		//暂时不用
		/*
		function updateCaptcha() {
			$(".captcha").attr("src", "/reg/captcha?v=" + Math.random());
			$("#captchaInput").val("");
		}*/
	</script>
</body>
</html>